{% extends "base.html" %}

{% block main %}
  	<script type="text/javascript" src="{{ MEDIA_URL }}jquery-1.4.4.min.js">
	</script>
	<script type="text/javascript" src="{{ MEDIA_URL }}jquery-ui-1.8.7.custom.min.js">
	</script>
<script type="text/javascript">
	
var edit = function(id){
	$("#edit-problem-form").dialog('open')
	var name_id = "#problem-name-" + id
	var subject_id = "#problem-subject-" + id
	var text_id = "#problem-text-" + id
	var prob_name = $(name_id).text()
	var prob_subject = $(subject_id).text()
	var prob_text = $(text_id).text()
	$("#problem-name-edit-form").text(prob_name);
	$("#problem-subject-edit-form").text(prob_subject);
	$("#problem-text-edit-form").text(prob_text);
	$("#problem-id-field").val(id)
}
	


var newSolution = function(id){
	$("#solution-form").dialog('open')
	var prob_name_id = "#problem-name-" + id
	var prob_name = $(prob_name_id).text()
	$("#problem_name-solution-form").text(prob_name);
	$("#problem_id-solution-form").val(id)
}


var subjectTags = function(availableTags) {
			
			$( "#id_subject" ).autocomplete({
				source: availableTags
			});
}
		
$(document).ready(function() {
    $("#edit-problem-form").dialog({
	autoOpen: false,
	height: 355,
	width: 460,
	modal: true
    });
	$("#solution-form").dialog({
	autoOpen: false,
	height: 355,
	width: 460,
	modal: true
    });
	
	$.get("/subjects/", function(data){
		//var subjects = jQuery.parseJSON(data);
		var output = new Array()
		data2 = jQuery.parseJSON(data);
		jQuery.each(data2, function(index,value){ output[index] = value.name });
		subjectTags(output);
	
	});
	

});
	
	
</script>


{% for text in probText %}
<div style="border-style: solid" id="problem-id-{{ text.problem.id }}">
	<p>Problem: <span id="problem-name-{{ text.problem.id }}">{{ text.problem.name }}  </span><a href="#" onclick="newSolution({{ text.problem.id }})">Propose Solution</a></span></p>
	<p>Subject: <span id="problem-subject-{{ text.problem.id }}">{{ text.problem.subject.name }}</span></p>
	<p id="problem-text-{{ text.problem.id }}">{{ text.text }}</p>
	<p id="problem-date-{{ text.problem.id }}">Last Changed: {{ text.createdOn }}</p>
	<p id="problem-user-{{ text.createdBy }}">By: {{ text.createdBy }}</p>
	<a id="edit-problem-link" href="#" onclick="edit({{ text.problem.id }})">Edit Text</a>
</div>
		
	
{% endfor %}

<form id="problem-form" action="/new_problem/" method="post">
	<div id="name-input" class="form-row-textbox">
	  <label for="id_problem">Problem Name:</label>
	  <textarea id="id_problem" name="problem_name"  rows="1" cols="35"></textarea>
	</div>
	<div class="form-row-textbox">
	  <label for="id_subject">Subject:</label>
	  <textarea id="id_subject" name="subject" rows="1" cols="35"></textarea>
	</div>
	<div class="form-row-textbox">
	  <label for="id_text">Text:</label>
	  <textarea id="id_text" name="problem_text" rows="4" cols="35"></textarea>
	</div>
	<div class="form-row-submit">
	  <input id="problem-submit-button" type="submit" value="Submit" />
	</div>
</form>


{% for solution in solutions %}
<div style="border-style: solid" id="solution-list">
<p>Problem: {{ solution.problem.name }}</p>
<p>Solution: {{ solution.name }}</p>
</div>

{% endfor %}


<!-- edit problem form -->

<div id="edit-problem-form">
	<form id="problem-form" action="/edit_problem/" method="post">
		<div class="form-row-textbox">
			 <label for="problem-name-edit-form">Problem:</label>
			<span id="problem-name-edit-form"> </span>
		</div>
		<div class="form-row-textbox">
		  <label for="problem-subject-edit-form">Subject:</label>
		  <textarea id="problem-subject-edit-form" name="subject" rows="1" cols="35"></textarea>
		</div>
		<div class="form-row-textbox">
		  <label for="problem-text-edit-form">Text:</label>
		  <textarea id="problem-text-edit-form" name="problem_text" rows="4" cols="35"></textarea>
		</div>
		<input type="hidden" id="problem-id-field" name="problem_id" value="-1" />
		<div class="form-row-submit">
		  <input id="problem-submit-button" type="submit" value="Save" />
		</div>
	</form>
</div>


<form id="solution-form" action="/new_solution/" method="post">
	<div id="name-input" class="form-row-textbox">
	  <label for="problem_name-solution-form">Problem Name:</label>
		<span id="problem_name-solution-form"> </span>
	</div>
	<div class="form-row-textbox">
	  <label for="id_solution-name">Solution Handle:</label>
	  <textarea id="id_solution-name" name="solution_name" rows="1" cols="35"></textarea>
	</div>
	<div class="form-row-textbox">
	  <label for="id_solution-text">Text:</label>
	  <textarea id="id_solution-text" name="solution_text" rows="4" cols="35"></textarea>
	</div>
	<input type="hidden" id="problem_id-solution-form" name="problem_id" value="-1" />
	<div class="form-row-submit">
	  <input id="problem-submit-button" type="submit" value="Submit" />
	</div>
</form>






{% endblock %}